import React, { memo, type FC } from "react";
import { IconRefresh, IconSearch } from "@arco-design/web-react/icon";
import { Form, Input, Select, Button, Space } from "@arco-design/web-react";
import type { FormItemProps } from "@arco-design/web-react/es/Form";

const Option = Select.Option;
export interface IBaseSearchFormItems {
  field: string;
  type: "input" | "select" | "autoComplete"; //类型
  label: string; //标题
  placeholder?: string;
  formItemProps?: FormItemProps;
  width?: number | string;
  height?: number | string;
}
interface ISelectFormItem extends IBaseSearchFormItems {
  type: "select";
  options: Array<{ label: string; value: string | number }>;
}
interface IInputFormItem extends IBaseSearchFormItems {
  type: "input";
}
export type ISearchFormItem = IInputFormItem | ISelectFormItem;

export interface ISearchFormProps {
  items: ISearchFormItem[];
  onSearch?: (values: any) => void;
  onReset?: () => void;
  searchText?: string;
  resetText?: string;
  style?: React.CSSProperties;
}

const SearchTableItems: FC<ISearchFormProps> = ({ items, onSearch }) => {
  const [form] = Form.useForm();
  // console.log(items);

  const renderFormItem = (item: ISearchFormItem) => {
    switch (item.type) {
      case "input":
        return (
          <Input
            status="warning"
            placeholder={item.placeholder}
            width={item.width || "200px"}
            onChange={(value) => console.log(value)}
          />
        );
      case "select":
        return (
          <Select
            status="warning"
            allowClear
            placeholder={item.placeholder}
            style={{ width: item.width || 200 }}
            onChange={(value) => console.log(value)}
          >
            {item.options?.map((item) => (
              <Option key={item.value} value={item.label}>
                {item.label}
              </Option>
            ))}
          </Select>
        );
      default:
        return null;
    }
  };

  const handleSubmit = (values: any) => {
    // console.log(values);
    if (onSearch) {
      onSearch(values);
    }
  };
  const handleReset = () => {
    form.resetFields();
    if (onSearch) {
      onSearch({});
    }
  };
  return (
    <div
      style={{
        margin: "20px",
      }}
    >
      <Form form={form} layout="inline" onSubmit={handleSubmit}>
        {items.map((item) => {
          return (
            <Form.Item
              key={item.field}
              field={item.field}
              label={item.label}
              style={{ margin: "7px", userSelect: "none" }}
            >
              {renderFormItem(item)}
            </Form.Item>
          );
        })}
        <Form.Item style={{ margin: "7px", userSelect: "none" }}>
          <Space>
            <Button
              icon={<IconSearch style={{ fontSize: "17" }} />}
              type="primary"
              style={{ width: "85px", height: "32" }}
              htmlType="submit"
            >
              搜索
            </Button>
            <Button
              icon={<IconRefresh style={{ fontSize: "17" }} />}
              type="outline"
              style={{ width: "85px", height: "32" }}
              onClick={handleReset}
            >
              重置
            </Button>
          </Space>
        </Form.Item>
      </Form>
    </div>
  );
};
export default memo(SearchTableItems);
